<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta name="keywords" content="trivial, room" />
	<meta name="description" content="FLEQ game room" />
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Free Libresoft Educational Quizbowl</title>

	<link href="/css/custom-style.css" rel="stylesheet" type="text/css" media="screen" />
	<link href="/css/jquery-tablesorter.css" rel="stylesheet" type="text/css" media="screen" />
	<link rel="stylesheet" href="/css/my-jquery-mobile.css" />
	<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
	<link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

</head>


<body>


<div id="wrapper">

	{% block header %}

		<div id="header-wrapper-mini">
			<div id="header">
				<table width="980">
					<tr>
						<td width="490">
							<div>
								<h1><a id="logo-mini" href="/">fleq</a></h1>
							</div>
						</td>
						<td>
						<table cellspacing="0" align="right">
							<tbody>
								<tr>
									<td>
										{% if user_me.is_authenticated %}
											<a data-role="button" href="/logout" data-mini="true" data-theme="a" data-icon="delete">Logout</a>
										{% endif %}
									</td>
								</tr>
							</tbody>
						</table>
						</td>
					</tr>			
				</table>
			</div>
		</div>
		<!-- end #header -->

		<div id="splash"></div>

	{% endblock %}



	<div id="page">
		<div id="content">

		<div class="contentbg">
			<div class="post">
				{% if not game.is_over %}

						<h2 class="title">{{ player1 }} vs {{ player2 }}</h2>

						<!--<center>
							<table id="scores" class="tablesorter" border="1">
								<tbody> 			
								<tr>
										<td><img src="/images/offline.png"/></td>
										<td>{{ player1 }}</td>
										<td><img src="/images/online.png"/></td>
										<td>{{ player2 }}</td>				
								</tr>

								</tbody>
							</table>
						</center>
						<br>-->


						<div id="chat" style="background: #f8f9fa; overflow-y: scroll; height: 250px; max-height: 250px;" 
																class="ui-input-text ui-body-c ui-corner-all ui-shadow-inset">
						<!--<div style='margin: 1px 3px 1px 3px;'>Connecting...</div>-->
						</div>
							
						<div  data-theme="c" data-positioned="fixed">
						  <form id="chatform">
								<p><input type="text" name="message" maxlength="150" id="text" style="background-color : #FFA9A9;" 
								class="ui-input-text ui-body-c ui-corner-all ui-shadow-inset" placeholder="Please wait, connecting..."></p>
						  </form>
						</div>


				{% else %}

						<h3 class="title">{{ player1 }}: {{ game.score_player1}} - {{game.score_player2}} :{{ player2 }}</h3><br>

						<center>

						<table id="scores" class="tablesorter">
							<thead> 
							<tr> 
								<th class="tooltip" title="Position">TIME</th>		
								<th class="tooltip" title="Username">USER</th>
								<th class="tooltip" title="Games played">MESSAGE</th>						
							</tr>
							</thead>

							<tbody> 			
								{% for line in dico %}
									<tr>
										<td style="background-color: #EEEEEE;">{{ line.timestamp }}</td>
										<td style="background-color: #EEEEEE;">{{ line.user }}</td>
										<td style="background-color: #EEEEEE;">{{ line.message }}</td>
									</tr>
								{% endfor %}
							</tbody>
						</table>

				{% endif %}

			</div>
			<div style="clear: both;">&nbsp;</div>
		</div>


		</div>
		<!-- end #content -->


		<div id="sidebar-bg">

			<div id="sidebar">

				{% if user_me.is_authenticated %}

					<ul>

						{% if user_me.is_superuser %}
							<li>
								<h2>admin</h2>
								<ul>
									<li><a href="/new-tournament">New tournament</a></li>
									<li><a href="/load-questions">Load questions</a></li>
								</ul>
							</li>
						{% endif %}

						<li>
							<h2>Games</h2>
							<ul>
								<li><a href="/next-games">My next games</a></li>
								<li><a href="/won-games">Won games</a></li>
								<li><a href="/lost-games">Lost games</a></li>
							</ul>
						</li>

						<li>
							<h2>Tournaments</h2>
							<ul>
								<li><a href="/my-tournaments">My tournaments</a></li>
								<li><a href="/active-tournaments">Active tournaments</a></li>
								<li><a href="/next-tournaments">Next tournaments</a></li>
								<li><a href="/finished-tournaments">Finished tournaments</a></li>
							</ul>
						</li>

					</ul>
		
				{% else %}
					<ul>
						<li>
							<h2>What is fleq?</h2>
							<p>FLEQ is a system that allows to organizes quizbowl tournaments easily. Its name is an acronym of Free LibreSoft Educational Quizbowl</p>
						</li>

						<li>
							<h2>How to use</h2>
							<ul>
								<li><a href="#">Step by step</a></li>
							</ul>
						</li>

						<!--<li>
							<h2>Tournaments</h2>
							<ul>
								<li><a href="#">Active tournaments</a></li>
								<li><a href="#">Next tournaments</a></li>
								<li><a href="#">Finished tournaments</a></li>
							</ul>
						</li>-->
						<li>
							<div>
							<h2>Tournaments</h2>
							<ul>
								<li><a href="index.html">Active tournaments</a></li>
								<li><a href="index.html">Next tournaments</a></li>
								<li><a href="index.html">Finished tournaments</a></li>
							</ul>
							</div>
						</li>
					</ul>


				{% endif %}

			</div>
		</div>
		<!-- end #sidebar -->


		<div style="clear: both;">&nbsp;</div>
	</div>
	<!-- end #page -->

</div>



	<!-- Extra JavaScript to connect with Tornado server-->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<script src="/js/socket.io.js"></script>

		<script>
		$(function() {
			var s = new io.connect('http://localhost:8004', {
				rememberTransport: false
			});

			s.on('connect', function() {
				data = '{"code": "1", "room": "{{ game.id }}", "user": "{{ user_me.username }}"}';
				s.send(data);
			});

			// Establish event handlers
			s.on('disconnect', function() {
				$("#text").attr("placeholder", "Reconnecting...");
				$("#text").css({'background-color' : '#FFA9A9'});
				s.socket.reconnect();
			});

			s.on('message', function(data) {
				var data = jQuery.parseJSON(data);

				if (data.code == 1){
					$("#text").css({'background-color' : '#FFFFFF'});
					$("#text").attr("placeholder", "Introduce a message");
				}else if (data.code == 2){
					$("#chat").append("<div class='message' style='margin: 1px 3px 1px 3px;'>" + data.user + ": " + data.message + "</div>");
					$("#chat").scrollTop($("#chat")[0].scrollHeight);
				}
			});

			//send the message when submit is clicked
			$('#chatform').submit(function (evt) {
				var msg = $('#chatform [type=text]').val();

				while (msg.indexOf('"') != -1){
					msg = msg.replace('"', '&quot;');
				}

				$('#chatform [type=text]').val('');
				msg = "\"".concat(msg).concat("\"}");
				var data = '{"code": "2", "room": "{{ game.id }}", "user": "{{ user_me.username }}", "message": ';
				data = data.concat(msg);
				s.send(data);
				return false;
			});
		});
		</script>

		<script>window.room = {{ game.id }};</script>


</body>
</html>
